import React from "react";

import {createStyles} from "antd-style"
import {Divider} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            transition: all .2s;

            li:nth-child(2n - 1) {
                background-color: ${token.colorPrimaryBg}3f;
            }
            li:nth-child(2n) {
                background-color: ${token.colorPrimary}3f;
            }
            li {
                padding: 0 20px;
            }

            button {
                display: block;
                width: 100%;
                text-align: left;
                font-size: 17px;
                color: ${token.colorText};
                padding: 5px;
                
                :hover {
                    color: ${token.colorPrimary};
                }
            }
        `,
    }
})

interface Props {
    pathList: string[]
    onClick: (path: string, index: number) => void
    // 对path进行预处理，仅影响显示，不影响onClick传入
    preProcess?: (path: string) => string
    bottomDivider?: boolean | string
}

const PathList: React.FC<Props> = ({pathList, onClick, preProcess, bottomDivider}) => {
    const {styles} = useStyles()

    return (
        <>
            <ul className={styles.container}>
                {
                    pathList
                        .filter(path => {
                            return path != '' && path != null
                        })
                        .map((path, index) => {
                            return (
                                <li key={path}>
                                    <button
                                        onClick={() => {
                                            onClick(path, index)
                                        }}
                                    >{
                                        preProcess ? preProcess(path) : path
                                    }</button>
                                </li>
                            )
                        })
                }
            </ul>
            {
                bottomDivider != null &&
                <Divider>{typeof bottomDivider == "string" ? bottomDivider : '到底了~~~'}</Divider>
            }
        </>
    )
}

export default PathList
